<template>
	<view class="content">
		<image class="beiY" src="../../static/beijinN.png" mode="aspectFill"></image>
		<image class="titel" @click="Toback" src="../../static/zou.png" mode="aspectFill"></image>
		<view class="nav">
			<view class="item" v-for="(item , index) in List" :key="index" @click="regulation(item.is_show , item.id)">
				<image v-if="item.is_show == '0'" class="imgsge" src="../../static/yes.png" mode="aspectFill"></image>
				<image v-if="item.is_show == '0'" class="chengong" src="../../static/chengong.png" mode="aspectFill">
				</image>
				<text v-if="item.is_show == '0'" class="contentlevel">第{{item.title}}关</text>
				<image v-if="item.is_show == '1'" class="imgsge" src="../../static/no.png" mode="aspectFill"></image>
					<view class="dasde" >{{ item.title}}</view>
			</view>
		</view>

		<view class="nav_pass" v-if="is_regulation">

			<view class="nav_box">
				<view class="nav_box_one">
					开始游戏
				</view>
				<view class="nav_box_two">
					点击相对应的甲骨文和楷书就可以消除方块，双击按两下即可查看文字相关内容。
				</view>
				<view class="nav_box_three" @click="tocustomspass">
					<view class="nav_box_three_one">

					</view>
					<view class="nav_box_three_two">

					</view>
					<span class="nav_box_three_span">知道啦</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref   } from "vue"
	import { onShow } from '@dcloudio/uni-app'; 
	// DataType
	interface Level_List {
		id : string,
		inputtime : string,
		is_show : string,
		title : string,
	}


// 页面加载时执行
onShow(() => {
  const pages = getCurrentPages(); // 获取当前页面栈
  const currentPage = pages[pages.length - 1]; // 获取当前页面对象
  const prevPage = pages[pages.length - 2]; // 获取上一页对象
  
  if (prevPage) {
    let currentPagecd = prevPage.route; // 获取上一页的路径
	


    if (currentPagecd == 'pages/index/index') {
      init(); // 调用初始化请求
    }
  }
})

	// 请求关卡数据
	let List = ref<Level_List[]>([])
	
	
const init = () => {
	uni.request({
		url: 'https://xcx.xiaombt.com/api.php?m=llk.lists', // 请求的URL
		method: 'POST', // 请求方法
		header: {
			'content-type': 'application/x-www-form-urlencoded', // 请求头 如有需要自行替换
		},
		success: function (res) {
			List.value = res.data as Level_List[] || []
		},
		fail: function (error) {
			console.error(error);
		}
	})
	
}
init()

	// 返回事件
	const Toback = () => {
		uni.navigateBack()
	}
	// 通关关卡
  let num = ref(0)
	let is_regulation = ref(false)
	const regulation = (is_show : string, id : string) => {
		console.log(is_show, id,'is_show : string, id : string' )
		 const OpenidData = uni.getStorageSync('OpenidData');
		 
		 console.log(OpenidData ,"::::")
		 
		 if(OpenidData && OpenidData.Openid.openid){
				uni.setStorageSync('data', { id:  Number(id) });
				   
					if (id == '1') { // 第一关要显示游戏规则
						is_regulation.value = true
					} else {
						uni.navigateTo({
							url: `/pages/customspass/customspass`
						});
					}
		 }else{
			 uni.navigateTo({
			 	url: `/pages/login/login`
			 });
			 
		 }
		
 
	}
	const tocustomspass = () => {
		uni.navigateTo({
			url: `/pages/customspass/customspass`
		});
      is_regulation.value = false
	}
</script>

<style scoped>
	image {
		width: 0;
		height: 0;
	}

	.content {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: -1;
	}

	.beiY {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.titel {
		position: fixed;
		top: 108rpx;
		left: 32rpx;
		width: 48rpx;
		height: 48rpx;

	}

	.nav {
		position: fixed;
		top: 250rpx;
		width: 544rpx;
		height: 1300rpx;
		overflow-y: scroll;
		margin-left: 110rpx;
		display: flex;

		flex-wrap: wrap;
		justify-content: space-between;

	}

	.nav::after {
		content: '';
		width: 160rpx;
		border: 1rpx solid transparent
	}

	.item {
		width: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;margin-bottom: 20rpx;
		position: relative;
		font-size:24rpx
	}
.dasde{
	text-align: center;
}
	.imgsge {
		width: 160rpx;
		height: 160rpx;
	}

	.chengong {
		position: absolute;
		left: 50%;
		top: 35rpx;
		width: 44rpx;
		height: 44rpx;
		margin-left: -22rpx;
	}

	.contentlevel {
		position: absolute;
		left: 50%;
		top: 80rpx;
		width: 80rpx;
		height: 44rpx;
		color: #fff;
		font-size: 24rpx;
		margin-left: -32rpx;
	}

	.nav_pass {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 650rpx;
		padding: 30rpx;
		box-sizing: border-box;
		border: 3px solid rgb(254, 198, 0);
		background: rgb(247, 255, 235);
		transform: translate(-50%, -50%);

	}

	.nav_box {
		width: 100%;
		height: 100%;
		border: 1rpx solid rgb(254, 198, 0);
	}

	.nav_box_one {
		width: 100%;
		height: 96rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		font-size: 40rpx;
		color: #fff;
		border-radius: 0px 0px 50px 50px;
		background: rgb(254, 198, 0);
	}

	.nav_box_two {
		font-size: 32rpx;
		margin: 68rpx 56rpx;
		line-height: 52rpx;
	}

	.nav_box_three {
		position: relative;
		width: 288rpx;
		margin: 0 auto;
		height: 106rpx;
		margin-bottom: 46rpx;
	}

	.nav_box_three_one {
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 555;
		height: 96rpx;
		border-radius: 40px;
		background: rgb(0, 189, 241);
	}

	.nav_box_three_two {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 96rpx;
		border-radius: 40px;
		background: rgb(0, 146, 186);
	}

	.nav_box_three_span {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 666;
		font-weight: bold;
		font-size: 40rpx;
		color: #fff;
		transform: translate(-50%, -58%);
	}
</style>